<template>
	<div class="copy-success-popup">
		<cl-popup direction="center" :force-update="false" :visible.sync="visible">
			<img src="@/assets/2/icon/popup-success.png" />
			<p>淘口令复制成功</p>
			<p>打开【淘宝】参加活动</p>

			<i class="cl-icon-close" @click="close"></i>
		</cl-popup>
	</div>
</template>

<script>
import ClPopup from '@/components/popup';

export default {
	components: {
		ClPopup
	},

	data() {
		return {
			visible: false,
			timer: null
		};
	},

	methods: {
		open() {
			this.visible = true;

			this.timer = setTimeout(() => {
				this.close();
			}, 3000);
		},

		close() {
			this.visible = false;
			clearTimeout(this.timer);
		}
	}
};
</script>

<style lang="scss" scoped>
.copy-success-popup {
	text-align: center;

	/deep/.cl-popup {
		border-radius: 20px;
		&__container {
			padding: 70px 80px;
		}
	}

	.cl-icon-close {
		position: absolute;
		right: 10px;
		top: 10px;
		font-size: 30px;
	}

	img {
		height: 96px;
		width: 108px;
		margin-bottom: 28px;
	}
	p {
		margin-bottom: 5px;
		font-size: 28px;
	}
}
</style>
